<!-- 移动端 -->
<button
  data-collapse-toggle="menu-full-box"
  id="mobile-btn"
  type="button"
  class="ml-4 inline-flex text-gray-800 dark:text-white items-center py-4 justify-center text-sm rounded-lg lg:hidden"
  aria-controls="navbar-sticky"
  aria-expanded="false"
>
  <span class="sr-only">打开菜单</span>
  <svg
    class="w-4 h-4"
    aria-hidden="true"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 17 14"
  >
    <path
      stroke="currentColor"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M1 1h15M1 7h15M1 13h15"></path>
  </svg>
</button>

<script>
  import { Collapse } from "flowbite";

  // 获取菜单节点下所有的下拉条
  let navBox = document.querySelector("#nav-box");
  if (navBox) {
    let dropdowns = navBox.querySelectorAll(".menu-dropdown");
    for (let i = 0; i < dropdowns.length; i++) {
      let dropdownTrag = dropdowns[i].getAttribute("data-toggle");
      //触摸点击显示下拉菜单
      dropdowns[i].addEventListener(
        "touchstart",
        function (event) {
          document
            .querySelector("#" + dropdownTrag)
            ?.classList.remove("hidden");
        },
        false
      );
      //点击关闭按钮关闭下拉菜单
      document
        .querySelector("#" + dropdownTrag + "-close")
        ?.addEventListener("touchstart", function (event) {
          setTimeout(function () {
            document.querySelector("#" + dropdownTrag)?.classList.add("hidden");
          }, 100);
        });
    }
  }

  let menuBtn = navBox!.querySelector("#mobile-btn");
  // 移动端导航button是否点击状态
  var menuBtnStatus = false;
  menuBtn!.addEventListener("click", function () {
    menuBtnStatus = !menuBtnStatus;
    if (!menuBtnStatus) {
      const ds = document.querySelectorAll(".menu-dropdown-box");
      ds.forEach(function (item) {
        item.classList.add("hidden");
      });
    }
  });
</script>

